<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }

        html {
            font-size: 62.5%;
        }

        html, body, .content {
            width: 100%;
            height: 100%;
        }

        .content {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            background: #1a375d;
        }

        .content div {
            margin: 1% 0 0;
        }

        .vii-holder-mask {
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            z-index: 100;
        }

        .vii-holder-mask .vii-holder-cell {
            display: table;
            width: 100%;
            height: 100%;
            padding: 20px 0px;
            background-color: rgb(247, 247, 247);
        }

        .vii-holder-mask .vii-holder-cell .vii-holder-item {
            display: table-cell;
            vertical-align: middle;
            color: rgb(202, 145, 56);
            font-size: 1.4rem;
            text-align: center;
            user-select: none;
        }


    </style>
</head>
<body>
<div class="content">
    <div style=" width: 100%; height: 48%;" id="newPulpRatio"></div>
    <div style=" width: 100%; height: 48%;" id="quantityPulpRatio"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts4.min.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/vii-placeholder.js"></script>
<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
<script language="javascript">

    /*
    * placeholder
    * 遮罩层
    * */
    var placeholder = new PlaceHolder({
        zIndex: 99999999999999,
        type: 'loading',
        color: '#FFF',
        background: 'rgba(0,0,0,.6)',
        text: "正在加速加载中...",
        template:
            '<img class="vii-placeholder-loading" src="images/loading.gif" width="30"/>\
             <span class="vii-placeholder-label" style="display: block;margin-top: 10px;font-size: 16px">{{ text }}</span>'
    });
    var date = new Date(), y = date.getFullYear();

    /*
     * getQuantityPulp
     * 获取浆量对比图数据
     * */


    function getPulpRatio(callback) {
        $.ajax({
            url: "http://60.164.210.223:7577/Nvr/map/gePulpWeight",
            dataType: 'jsonp',
            data: {
                startTime: y + "-01-01",
                endTime: y + "-01-31"
            },
            beforeSend: function () {
                placeholder.show(document.body);
            },
            success: function (list) {
                callback(list);
            },
            error: function (XMLHttpRequest) {
                alert("浆量对比图请求失败！");
                placeholder.hide(document.body);
                $(".vii-holder-mask").hide();
            }
        });
    }

    getPulpRatio(function (item) {
        initPulpRatio(item);
    });

    /*
    * initQuantityPulp
    * 生成浆量对比图
    * */
    function initPulpRatio(item) {
        var color = [
                '#e95e48',
                '#DC951F',
                '#DDB100',
                '#DAD503',
                '#8AC867',
                '#33CC99',
                '#37B8D4',
                '#7BCFE7',
                '#6A9BD3'
            ],
            category = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        var grid = {left: 50, right: 20},
            xAxis = {
                type: 'category',
                data: category,
                splitLine: {show: false},
                axisLine: {lineStyle: {color: "#F9F9F9"}}
            };

        var newP0 = [
                item.peole[0].thisYear1,
                item.peole[0].thisYear2,
                item.peole[0].thisYear3,
                item.peole[0].thisYear4,
                item.peole[0].thisYear5,
                item.peole[0].thisYear6,
                item.peole[0].thisYear7,
                item.peole[0].thisYear8,
                item.peole[0].thisYear9,
                item.peole[0].thisYear10,
                item.peole[0].thisYear11,
                item.peole[0].thisYear12
            ],
            newP1 = [
                item.peole[0].lastYesr1,
                item.peole[0].lastYesr2,
                item.peole[0].lastYesr3,
                item.peole[0].lastYesr4,
                item.peole[0].lastYesr5,
                item.peole[0].lastYesr6,
                item.peole[0].lastYesr7,
                item.peole[0].lastYesr8,
                item.peole[0].lastYesr9,
                item.peole[0].lastYesr10,
                item.peole[0].lastYesr11,
                item.peole[0].lastYesr12
            ],
            RP0 = [
                item.rType[0].thisYear1,
                item.rType[0].thisYear2,
                item.rType[0].thisYear3,
                item.rType[0].thisYear4,
                item.rType[0].thisYear5,
                item.rType[0].thisYear6,
                item.rType[0].thisYear7,
                item.rType[0].thisYear8,
                item.rType[0].thisYear9,
                item.rType[0].thisYear10,
                item.rType[0].thisYear11,
                item.rType[0].thisYear12
            ],
            RP1 = [
                item.rType[0].lastYesr1,
                item.rType[0].lastYesr2,
                item.rType[0].lastYesr3,
                item.rType[0].lastYesr4,
                item.rType[0].lastYesr5,
                item.rType[0].lastYesr6,
                item.rType[0].lastYesr7,
                item.rType[0].lastYesr8,
                item.rType[0].lastYesr9,
                item.rType[0].lastYesr10,
                item.rType[0].lastYesr11,
                item.rType[0].lastYesr12
            ],
            notP0 = [
                item.notPulp[0].thisYear1,
                item.notPulp[0].thisYear2,
                item.notPulp[0].thisYear3,
                item.notPulp[0].thisYear4,
                item.notPulp[0].thisYear5,
                item.notPulp[0].thisYear6,
                item.notPulp[0].thisYear7,
                item.notPulp[0].thisYear8,
                item.notPulp[0].thisYear9,
                item.notPulp[0].thisYear10,
                item.notPulp[0].thisYear11,
                item.notPulp[0].thisYear12
            ],
            notP1 = [
                item.notPulp[0].lastYesr1,
                item.notPulp[0].lastYesr2,
                item.notPulp[0].lastYesr3,
                item.notPulp[0].lastYesr4,
                item.notPulp[0].lastYesr5,
                item.notPulp[0].lastYesr6,
                item.notPulp[0].lastYesr7,
                item.notPulp[0].lastYesr8,
                item.notPulp[0].lastYesr9,
                item.notPulp[0].lastYesr10,
                item.notPulp[0].lastYesr11,
                item.notPulp[0].lastYesr12
            ],
            diff = [
                item.peoDiff[0].thisLastDiff1,
                item.peoDiff[0].thisLastDiff2,
                item.peoDiff[0].thisLastDiff3,
                item.peoDiff[0].thisLastDiff4,
                item.peoDiff[0].thisLastDiff5,
                item.peoDiff[0].thisLastDiff6,
                item.peoDiff[0].thisLastDiff7,
                item.peoDiff[0].thisLastDiff8,
                item.peoDiff[0].thisLastDiff9,
                item.peoDiff[0].thisLastDiff10,
                item.peoDiff[0].thisLastDiff11,
                item.peoDiff[0].thisLastDiff12
            ],
            weightDiff = [
                item.weightDiff[0].thisLastDiff1,
                item.weightDiff[0].thisLastDiff2,
                item.weightDiff[0].thisLastDiff3,
                item.weightDiff[0].thisLastDiff4,
                item.weightDiff[0].thisLastDiff5,
                item.weightDiff[0].thisLastDiff6,
                item.weightDiff[0].thisLastDiff7,
                item.weightDiff[0].thisLastDiff8,
                item.weightDiff[0].thisLastDiff9,
                item.weightDiff[0].thisLastDiff10,
                item.weightDiff[0].thisLastDiff11,
                item.weightDiff[0].thisLastDiff12
            ];
        //chart1
        var myChart1 = echarts.init(document.getElementById("newPulpRatio"));
        var option1 = {
            title: {
                text: '新浆员当期与同期比',
                textStyle: {
                    color: '#C8E1FD',
                    fontSize: 15,
                    fontFamily: '微软雅黑'
                }
            },
            grid: grid,
            tooltip: {
                backgroundColor: "#F6F6F6",
                borderWidth: 1,
                borderColor: "rgba(0,0,0,.3)",
                confine: true,
                enterable: true,
                transitionDuration: 0,
                textStyle: {
                    color: "#333"
                },
                extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                padding: [5, 10],
                position: function (pos, params, dom, rect, size) {
                    return [pos[0] + 10, pos[1]];
                },
                formatter: function (params) {
                    return params.seriesName + "[" + category[params.dataIndex] + "]" + (params.seriesName.substr(0, 2) === "今年" ? "当期" : "同期") + "总人数：<span style='color: red;font-weight: bold;'>" + params.value + "</span>人" +
                        (
                            params.seriesName.substring(2) === "新浆员" ?
                                ( "<br/>今年[" + category[params.dataIndex] + "]新浆员与去年[" + category[params.dataIndex] + "]新浆员差：<span style='color: red;font-weight: bold;'>" + diff[params.dataIndex] + "</span>人" ) :
                                ""
                        );
                }
            },
            legend: [
                {
                    textStyle: {color: "#FFF"},
                    top: 0,
                    data: [
                        {
                            name: "今年新浆员",
                            icon: 'circle'
                        },
                        {
                            name: "今年R浆员",
                            icon: 'circle'
                        },
                        {
                            name: "今年建档未献浆浆员",
                            icon: 'circle'
                        }
                    ],
                    formatter: function (name) {
                        if (name === "今年新浆员") {
                            return name + "当期总人数（ " + item.peole[0].thisYear + " 人）"
                        } else if (name === "今年R浆员") {
                            return name + "当期总人数（ " + item.rType[0].thisYear + " 人）"
                        } else if (name === "今年建档未献浆浆员") {
                            return name + "当期总人数（ " + item.notPulp[0].thisYear + " 人）"
                        }
                    }
                },
                {
                    textStyle: {color: "#FFF"},
                    top: 20,
                    data: [
                        {
                            name: "去年新浆员",
                            icon: 'circle'
                        },
                        {
                            name: "去年R浆员",
                            icon: 'circle'
                        },
                        {
                            name: "去年建档未献浆浆员",
                            icon: 'circle'
                        }
                    ],
                    formatter: function (name) {
                        if (name === "去年新浆员") {
                            return name + "总人数（ " + item.peole[0].lastYesr + " 人）"
                        } else if (name === "去年R浆员") {
                            return name + "总人数（ " + item.rType[0].lastYesr + " 人）"
                        } else if (name === "去年建档未献浆浆员") {
                            return name + "总人数（ " + item.notPulp[0].lastYesr + " 人）"
                        }
                    }
                }
            ],
            xAxis: xAxis,
            yAxis: {
                type: 'value',
                name: "人数",
                nameGap: 5,
                min: 0,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#F9F9F9"
                    }
                }
            },
            series: (function () {
                var series = [];
                var data = [
                    {
                        name: "去年新浆员",
                        value: newP1,
                        color: '#37B8D4'
                    },
                    {
                        name: "今年新浆员",
                        value: newP0,
                        color: '#8AC867'
                    },
                    {
                        name: "今年建档未献浆浆员",
                        value: notP0,
                        color: '#e95e48'
                    },
                    {
                        name: "去年建档未献浆浆员",
                        value: notP1,
                        color: '#e95e48'
                    },
                    {
                        name: "今年R浆员",
                        value: RP0,
                        color: '#DDB100'
                    },
                    {
                        name: "去年R浆员",
                        value: RP1,
                        color: '#DDB100'
                    }

                ];
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    series.push({
                        name: item.name,
                        stack: item.name.substr(0, 2),
                        data: item.value,
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: item.color
                            }
                        }
                    })
                }
                return series;
            }())
        };
        myChart1.setOption(option1);


        var myChart2 = echarts.init(document.getElementById("quantityPulpRatio"));
        var option2 = {  //chart2
            color: [
                '#37B8D4',
                '#8AC867',
                '#6A9BD3'
            ],
            title: {
                text: '浆量当期与同期比',
                textStyle: {
                    color: '#C8E1FD',
                    fontSize: 15,
                    fontFamily: '微软雅黑'
                }
            },
            grid: grid,
            tooltip: {
                backgroundColor: "#F6F6F6",
                borderWidth: 1,
                borderColor: "rgba(0,0,0,.3)",
                confine: true,
                enterable: true,
                transitionDuration: 0,
                textStyle: {
                    color: "#333"
                },
                extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                padding: [5, 10],
                position: function (pos, params, dom, rect, size) {
                    return [pos[0] + 10, pos[1]];
                },
                formatter: function (params) {
                    return params.seriesName + "[" + category[params.dataIndex]  + "]" +  (params.seriesName.substr(0, 2) === "今年" ? "当期" : "同期") + "总浆量：<span style='color: red;font-weight: bold;'>" + params.value + "</span>袋" +
                        "<br/>今年[" + category[params.dataIndex]  + "]浆量与去年[" + category[params.dataIndex]  + "]浆量差：<span style='color: red;font-weight: bold;'>" + weightDiff[params.dataIndex] + "</span>袋" +
                        "<br/>去年同期浆量：<span style='color: red;font-weight: bold;'>" + item.pulpWeights[0].lastYearCollNum + "</span>袋" +
                        "<br/>今年当期浆量与去年同期浆量差：<span style='color: red;font-weight: bold;'>" + item.weightDiff[0].thisLastDiff + "</span>袋";
                }
            },
            legend: {
                textStyle: {color: "#FFF"},
                data: [
                    {
                        name: "去年",
                        icon: 'circle'
                    },
                    {
                        name: "今年",
                        icon: 'circle'
                    }
                ],
                formatter: function (name) {
                    if (name === "今年") {
                        return name + "当期总浆量（ " + item.pulpWeights[0].thisYear + " 袋）"
                    } else if (name === "去年") {
                        return name + "总浆量（ " + item.pulpWeights[0].lastYesr + " 袋）"
                    }
                }
            },
            xAxis: xAxis,
            yAxis: {
                type: 'value',
                name: "袋",
                nameGap: 5,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#F9F9F9"
                    }
                }
            },
            series: [
                {
                    name: "去年",
                    data: [
                        item.pulpWeights[0].lastYesr1,
                        item.pulpWeights[0].lastYesr2,
                        item.pulpWeights[0].lastYesr3,
                        item.pulpWeights[0].lastYesr4,
                        item.pulpWeights[0].lastYesr5,
                        item.pulpWeights[0].lastYesr6,
                        item.pulpWeights[0].lastYesr7,
                        item.pulpWeights[0].lastYesr8,
                        item.pulpWeights[0].lastYesr9,
                        item.pulpWeights[0].lastYesr10,
                        item.pulpWeights[0].lastYesr11,
                        item.pulpWeights[0].lastYesr12
                    ],
                    type: 'bar',
                    barWidth: 20
                },
                {
                    name: "今年",
                    data: [
                        item.pulpWeights[0].thisYear1,
                        item.pulpWeights[0].thisYear2,
                        item.pulpWeights[0].thisYear3,
                        item.pulpWeights[0].thisYear4,
                        item.pulpWeights[0].thisYear5,
                        item.pulpWeights[0].thisYear6,
                        item.pulpWeights[0].thisYear7,
                        item.pulpWeights[0].thisYear8,
                        item.pulpWeights[0].thisYear9,
                        item.pulpWeights[0].thisYear10,
                        item.pulpWeights[0].thisYear11,
                        item.pulpWeights[0].thisYear12
                    ],
                    type: 'bar',
                    barWidth: 20
                }
            ]
        };
        myChart2.setOption(option2);

        echarts.connect([myChart1, myChart2]);
        placeholder.hide(document.body);
        $(".vii-holder-mask").hide();
    }

</script>
</html>